const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin');
module.exports = {
    mode: 'development',
    devtool: false,
    //entry: './src/index.js',
    entry: {
        page1: './src/page1.js',
        page2: './src/page2.js',
        page3: './src/page3.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    optimization: {
        splitChunks: {
            chunks: 'all',//代码分割默认只应用于异步chunk,all=initial+async
            minSize: 0,//分割出去的代码的最小大小，默认是30K ，0就是不限制分割出去代码的大小
            minChunks: 2,//被多少个模块共享 后会进行分割，在分割前被引用的次数
            maxAsyncRequests: 3,//异步模块内部最大的并发请求数//不好理解最后讲
            maxInitialRequests: 4,//限制入口的拆分数量的 //不好理解最后讲
            name: false,//打包后的名称，默认是通过分隔符~  vendor~ 
            automaticNameDelimiter: '~',//名称的分隔符
            cacheGroups: {
                //默认缓存组，默认组的priority0
                vendors: {
                    chunks: 'all',
                    test: /node_modules/,//放入此缓存组件的条件
                    priority: -10,//优先级 一个chunk可能会满足多个缓存组，会被取到优先级比较高的组里
                },
                default: {
                    chunks: 'all',
                    minSize: 0,
                    minChunks: 2,//最小引用次数2
                    priority: -20,
                }
            }
        },
        runtimeChunk:false
    },
    module: {
        //如果使用noParse的话，jquery模块里不能使用import require define
        noParse: /jquery|lodash/,//parser为了查找依赖项编译依赖项
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                //modules:false的意思是在loader转换的时候，不要把import 语句export转换成commonjs
                                ["@babel/preset-env", { modules: false }]
                            ]
                        }
                    }
                ]

            },
            {
                test: /\.css$/,
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/,
                use: [
                    'style-loader',//不能配MiniCssExtractPlugin.loader
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        /*         new HtmlWebpackPlugin({
                    template: './src/index.html',
                    filename:'index.html'
                }), */
        //new PreloadWebpackPlugin()
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'page1.html',
            chunks: ['page1']
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'page2.html',
            chunks: ['page2']
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'page3.html',
            chunks: ['page3']
        })
    ]
}